<template>
    <div>
        <div class="activity-right" style="padding-top:20px;">
            <h1>仓库用户列表</h1>
            <el-form :inline="true" :model="formInline" class="demo-form-inline">
                <el-input class='search-input' v-model="goodsNo" placeholder="商品编号"></el-input>
                <el-button type="primary" @click="searchStore">搜索</el-button>
                <el-button class='right' type="primary" @click="addAgent">添加代理</el-button>
                <!-- <el-button class='right' type="primary"  @click="addGoods">添加用户</el-button>  -->
            </el-form>
            <section class="table goodListTab">
                <!-- 用户列表 -->
                <el-table class="table-common" ref="multipleTable" :data="agentList" tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange">
                    <el-table-column width="55">
                    </el-table-column>
                    <el-table-column label="姓名" prop="goodsNo" width="120">
                    </el-table-column>
                    <el-table-column label="用户Id" prop="goodsName" width="120">
                    </el-table-column>
                    <el-table-column prop="goodsBrand" label="所属">
                    </el-table-column>
                    <el-table-column prop="goodsclassify" label="手机号">
                    </el-table-column>
                    <el-table-column prop="goodsStyle" label="密码">
                    </el-table-column>
                    <el-table-column prop="roleId" label="角色" width="180">
                        <template slot-scope="scope">
                            {{scope.row.roleId == 1 ? '店长' : (scope.row.roleId == 2 ? '店员': '管理员')}}
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" width="150">
                        <template slot-scope="scope">
                            <el-button type="text" size="small" @click="$router.push({path:'/editUser'})">编辑</el-button>
                            <el-button type="text" size="small" @click="handleDelate(scope.row.goodsId)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <section class="pagination" v-if="total > 5">
                    <template v-if="page == 1">
                        <el-button type="primary" disabled>上一页</el-button>
                    </template>
                    <template v-else>
                        <el-button type="primary" @click="pagePrev">上一页</el-button>
                    </template>
                    <template v-if="Math.ceil(total/5) <= page">
                        <el-button type="primary" disabled>下一页</el-button>
                    </template>
                    <template v-else>
                        <el-button type="primary" @click="pageNext">下一页</el-button>
                    </template>
                    <div class="jumpPage">
                        <el-input v-model="jumpPage"></el-input>
                        <el-button type="primary" @click="jumpPageMethod">跳转</el-button>
                    </div>
                    <div style="line-height:40px;margin-left:20px">
                        {{page + '/'+ Math.ceil(total/5)}}
                    </div>
                </section>
            </section>
        </div>
    </div>
</template>
<script>
import leftBar from "../commonComponents/leftBar.vue";
import { mapActions, mapState } from "vuex";
import {
    getProducts,
    addGoods,
    getGoodsDetailsNew,
    updateGoods,
    updateGoodsStatus,
    getQiniuToken,
    qiniuBaseUrl,
    getCategory
} from "../../data/postData";
export default {
    components: {
        leftBar
    },
    data() {
        return {
            user: JSON.parse(localStorage.getItem("ddaigoUser")),
            activeName: "first",
            formInline: null,
            form: {
                startTime: "",
                endTime: "",
                soldout: "",
                storeNo: "",
                orderBy: "",
                soldout: "",
                goodsName: "",
                page: 1
            },
            agentList: [
                {
                    agentName: "122344",
                    agentId: 1
                }
            ],

            tabId: 1,
            isShow: false,
            name: "",
            goodsList: null,
            total: "",
            goodsNo: "",
            styleNo: "",
            classifyNo: "",
            roleId: "",
            sizeNo: "",
            brandNo: ""
        };
    },
    mounted() {
        console.log(this.tabId);
    },
    methods: {
        handleClickTab(tab, event) {
            this.tabId = event.target.id;
            console.log(77777);
            console.log(this.tabId);
            if (event.target.id == "tab-first") {
                this.tabId = 1;
            } else {
                this.tabId = 2;
            }
            console.log(this.tabId);
        },
        onSubmit() {},
        searchStore() {},
        addAgent() {
            this.$router.push({ path: "/addagent" });
        },
        handleClick() {},
        handleSelectionChange() {},
        pagePrev() {
            this.page--;
            this.searchRequest(this.page);
            // sessionStorage.setItem('goodsPage',this.page)
        },
        pageNext() {
            this.page++;
            this.searchRequest(this.page);
            console.log(this.goodsPage);
            //  sessionStorage.setItem('goodsPage',this.page)
        }
    }
};
</script>

<style scoped lang="less">
#tab-first {
    width: 50% !important;
}
.el-form-item {
    display: inline-block;
}
.pl {
    margin: 10px 0;
}
.page {
    margin-top: 10px;
    display: flex;
    justify-content: center;
}
.activity-right {
    h1 {
        font-size: 24px;
        margin-bottom: 20px;
    }
    .addGoods {
        margin-bottom: 20px;
        position: absolute;
        right: 0;
        top: 0;
    }
}
.table {
    position: relative;
    .tabs {
        width: 100%;
        .is-top {
            width: 50%;
        }
    }
    .bottom-pl {
        position: absolute;
        left: 0;
        bottom: 0;
        // width: 100%;
    }
}
.el-form {
    width: 100%;
}
.goodsItem {
    position: relative;
    display: inline-block;
    width: 630px;
    .selGoodsItem {
        width: 179px;
        border-radius: 4px;
        border: 1px solid #dcdfe6;
        height: 40px;
        line-height: 40px;
        text-align: center;
        display: inline-block;
        cursor: pointer;
    }
    section {
        position: absolute;
        left: 10px;
        top: 48px;
        background: #fff;
        border: 1px solid #e4e7ed;
        z-index: 99999;
        &:after {
            content: "";
            position: absolute;
            top: -8px;
            left: 75px;
            display: block;
            width: 0;
            height: 0;
            border-bottom: 8px solid #e4e7ed;
            border-left: 5px solid transparent;
            border-right: 5px solid transparent;
        }
        &:before {
            content: "";
            position: absolute;
            top: -6px;
            left: 76px;
            display: block;
            width: 0;
            height: 0;
            border-bottom: 6px solid #fff;
            border-left: 4px solid transparent;
            border-right: 4px solid transparent;
            z-index: 99999;
        }
    }
}
.search-2 {
    position: absolute;
    left: 230px;
    bottom: 0px;
    width: 200px;
}
.pagination {
    display: flex;
    justify-content: center;
    margin: 20px 0;
}
.table {
    img {
        width: 100px;
    }
}
.jumpPage {
    position: absolute;
    right: 0;
    bottom: 0;
    // width: 300px;
    input,
    .el-input {
        width: 100px !important;
        display: inline-block;
    }
}
.search-input {
    width: 30%;
}
.right {
    float: right;
    margin-right: 5%;
}
</style>